/**
 * 受保护路由组件
 * 用于包装需要权限验证的组件，确保只有授权用户可以访问
 */
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import auth from '../../utils/auth';

interface ProtectedRouteProps {
  children: React.ReactNode;
  requiredPermission?: string;
}

/**
 * 受保护路由组件
 * 检查用户是否有权限访问，如无权限则重定向到登录页或403页面
 * 
 * @param {ProtectedRouteProps} props - 组件属性
 * @returns {React.ReactElement} 如有权限则渲染子组件，否则重定向
 */
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ 
  children, 
  requiredPermission 
}) => {
  const location = useLocation();
  const isAuthenticated = auth.isAuthenticated();
  
  // 检查是否已登录
  if (!isAuthenticated) {
    console.log('ProtectedRoute: 未登录，重定向到登录页');
    // 重定向到登录页，同时保存当前URL以便登录后返回
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  // 如果需要特定权限，检查用户是否有该权限
  if (requiredPermission && !auth.hasPermission(requiredPermission)) {
    console.log(`ProtectedRoute: 无权限访问 ${requiredPermission}，重定向到首页`);
    // 无权限访问，重定向到首页
    return <Navigate to="/home" replace />;
  }
  
  // 有权限，正常渲染
  return <>{children}</>;
};

export default ProtectedRoute; 